<template>
    <a-row :gutter="16">
        <a-col :span="8">
            <a-card>
                <p>用户数</p>
                <p class="conut green">{{ countObj.users_count }}个</p>
            </a-card>
        </a-col>
        <a-col :span="8">
            <a-card>
                <p>订单数</p>
                <p class="conut red">{{ countObj.order_count }}个</p>
            </a-card>
        </a-col>
        <a-col :span="8">
            <a-card>
                <p>商品数</p>
                <p class="conut blue">{{ countObj.goods_count }}个</p>
            </a-card>
        </a-col>
    </a-row>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getHomeCountAPI } from '@/api/home.js'
const countObj = ref({})
const getcountObj = async () => {
    const res = await getHomeCountAPI()
    countObj.value = { ...res }
}
onMounted(() => {
    getcountObj()
})
</script>
<style scoped lang="scss">
p {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
}
.conut {
    font-size: 24px;
    margin-top: 10px;
}
.green {
    color: rgb(63, 134, 0);
}
.red {
    color: rgb(207, 19, 34);
}
.blue {
    color: rgb(35, 74, 188);
}
</style>
